<template>
	<view class="user">
<!-- 		<view class="top">
			<image src="../../static/images/history.png" mode=""></image>
			<view class="text">浏览历史</view>
		</view> -->
		<view class="content">
			<view class="rowtitle"  v-if="listArr.length">
				<view></view>
				<view>
					<button class="mini-btn" type="default" size="mini" @click="clearHistoryBtn">清除全部</button>
				</view> 
			</view>
				<uni-collapse ref="collapse" v-model="value">
					<uni-collapse-item title="今日足迹" >
						<view class="row" v-for="item in listtodayArr">
							<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
						</view>
						<view class="nohistory" v-if="!listArr.length">
							<image src="../../static/images/nohis.png" mode="widthFix"></image>
							<view class="text">暂无浏览记录,快去看新闻吧~</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item title="全部历史" >
						<view class="row" v-for="item in listArr">
							<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
						</view>
						<view class="nohistory" v-if="!listArr.length">
							<image src="../../static/images/nohis.png" mode="widthFix"></image>
							<view class="text">暂无浏览记录,快去看新闻吧~</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
		</view>

			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="确认" title="提示" content="你确定清除所有历史记录吗？" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr:[],
				value:['0'],
				listtodayArr:[]
			};
		},
		// onShow(){
		// 	this.getData()
		// },		
		onLoad(){
			this.getData()
		},
		methods:{
			//跳转到详情页
			goDetail(item){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			
			//获取缓存浏览记录
			getData(){
				this.listArr=uni.getStorageSync("historyArr") || []
				if(this.listArr.length===0){return}
				this.listArr.forEach((item,index,arr)=>{
					// 获取目标日期时间
					const targetDate = new Date(item.looktime);
					// 获取当前日期时间
					const now = new Date();
					// 判断目标日期是否为今天
					if (targetDate.getFullYear()===now.getFullYear()&&targetDate.getMonth()===now.getMonth()&&targetDate.getDate() === now.getDate()){
					  // console.log('目标日期是今天');
					  this.listtodayArr.push(item)
					} else {
					  // console.log('目标日期不是今天');
					}
				})
				// console.log(this.listtodayArr);
				// console.log(this.listArr);
			},
			
			// 清除历史记录
			clearHistoryBtn(){
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				// console.log(JSON.parse(localStorage.getItem("historyArr")));
				localStorage.clear()
				this.listArr = [] 
				this.listtodayArr = []
			},
			dialogClose() {
				console.log('点击关闭')
			}
		}
	}
</script>

<style lang="scss" scoped>
.user{
	.top{
		padding:50rpx 0;
		background: #F8F8F8;
		color:#666;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 150rpx;
			height: 150rpx;
		}
		.text{
			font-size: 38rpx;		
			padding-top: 20rpx;
		}
	}
	.content{
		padding:30rpx;
		.rowtitle{
			display: flex;
			justify-content: space-between;
		}
		.row{
			border-bottom:1px dotted #efefef;
			padding:20rpx 0;
		}
		/deep/ .uni-collapse-item__title-box{
			padding: 0 10rpx;
		}
	}
	.nohistory{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 450rpx;
		}
		.text{
			font-size: 26rpx;
			color:#888;
		}
	}
}
</style>
